<template>
	<view class="data_list_view camera_record">
		<template v-if="list.length">
			<!-- 数据列表 -->
			<view class="list_item" v-for="(item, index) in list" :key="index">
				<view class="list_item_info">
					<view class="list_item_info_img">
						<image :src="item.showImage"></image>
					</view>
					<view class="list_item_info_right">
						<view class="list_item_info_rCon1">
							<view class="list_item_info_rCon1_t1">{{ item.productName }}</view>
							<view :class="getClassByState(item.sendStatus)"
							 class="list_item_info_rCon1_t2">{{ stateList[item.sendStatus] }}</view>
							<view class="list_item_info_bottom">
								<view class="list_item_info_bPrice">￥{{ item.payAmount / 100 }}</view>
								<view class="list_item_info_bTime">{{ item.createTime }}</view>
							</view>
						</view>
						<view class="list_item_info_rCon2">套餐名称：{{ item.packageName }}</view>
						<view class="list_item_info_rCon2" v-if="item.backgroup">背景色：
							<view class="list_item_info_background" :style="{backgroundColor: item}"
								v-for="(item, index) in item.backgroup.split(',')" :key="index"></view>	
						</view>
						<view class="list_item_info_rCon2">快递方式：{{ item.expressCompany }}</view>
					</view>
				</view>
				<view class="list_item_btnBox">
					<view class="list_item_btn" @tap="copyImgLink(item.showImage)">复制链接</view>
					<view class="list_item_btn" @tap="showLogistics(item)">查看物流</view>
					<view class="list_item_btn" @tap="printAgain(item.id, item)">再印一份</view>
				</view>
			</view>
		</template>
		
		<emptyData v-else :title="emptyTitle" :loading="loading"></emptyData>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	
	// 页面加载完成
	onLoad(() => {
		getList();
	})
	
	onReachBottom(()=>{
		if(page.pageCurrent > page.pageNo) {
			page.pageNo = page.pageNo + 1;
			getList();
		}
	})
	
	// 无数据显示
	import emptyData from '../../components/empty_data/empty_data.vue';
	const emptyTitle = ref('冲印记录');
	
	// 加载状态
	const loading = ref(false);
	// 记录列表
	let list = ref([]);
	const page = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		pageCurrent: 0
	})
	// 获取列表
	function getList() {
		loading.value = true;
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		uni.$request('/api/busi/print/select', {payStatus: 1,pageNo: page.pageNo, pageSize: page.pageSize}).then((res)=>{
			if(res.status == 200) {
				if(res.data.total) {
					page.total = res.data.total;
					page.pageCurrent = res.data.total / page.pageSize
				}
				let data = res.data.printOrderList;
				if(data.length) {
					for(let item of data) {
						if(item.imageUrl.includes('{')) {
							let imageUrlJson = JSON.parse(item.imageUrl);
							for (let key in imageUrlJson) {
								item.showImage = imageUrlJson[key];
								console.log(item.imageUrl)
								break;
							}
						}else if(item.imageUrl.includes(',')) {
							item.showImage = item.imageUrl.split(',')[0];
						}else {
							item.showImage = item.imageUrl;
						}
					}
					list.value = list.value.concat(data);
				}
			}
			uni.hideLoading();
			loading.value = false;
		})
	}
	
	const stateList = reactive(['待发货', '已发货', '已签收']);
	function getClassByState(state) {
		if(state == 0) {
			return 'list_item_info_rCon1_t2Style1'
		}else if(state == 1) {
			return 'list_item_info_rCon1_t2Style2'
		}
		return '';
	}
	function copyImgLink (imageUrl) {
		//复制到剪切板
		uni.setClipboardData({
			data: imageUrl,
			success() {
				uni.$u.toast('已复制到剪切板，请打开浏览器粘贴到地址栏下载')
			}
		});
	}
	// 查看物流
	function showLogistics(data) {
		uni.navigateTo({
			url: '/pages/my/logistics?data=' + JSON.stringify(data)
		})
	}
	// 再印一份
	function printAgain(orderNo, itemData) {
		console.log(itemData);
		// 获取冲印订单详情
		uni.$request('/api/busi/print/selectByOrderNo', { orderNo: orderNo.toString() }).then(async (res)=>{
			if(res.status == 200 && res.data.printOrder) {
				let printOrder = res.data.printOrder;
				uni.setStorageSync('choosedAddresInfo', {
					id: itemData.addressId,
					address: itemData.address,
					area: itemData.area,
					consignee: itemData.consignee,
					phone: itemData.phone,
				})
				
				if(printOrder.recordType == 12) {
					// 先上传所有图片
					const data = {
						id: printOrder.productId,
						// size: printOrder.size,
						count: printOrder.count,
						// meterial: printOrder.meterial,
						// express: printOrder.express,
						images: printOrder.imageUrl,
					};
					// 生活照
					uni.navigateTo({
						url: '/pages/photo-print/photo-print-confirm?data=' + JSON.stringify(data),
						url: '/pages/photo-print/photo-print-life',
					})
				}else if(printOrder.recordType == 2 || printOrder.recordType == 11) {
					// 证件照
					let { dpi, height, heightPixel, maxSize, minSize, width, widthPixel, printNum, specId } = await byId(printOrder.productId);
					let typesetUrl = '';
					if(printOrder.typesetImageUrl.includes('{')) {
						let imageUrlJson = JSON.parse(printOrder.typesetImageUrl);
						for (let key in imageUrlJson) {
							typesetUrl = imageUrlJson[key];
							break;
						}
					}else if(printOrder.typesetImageUrl.includes(',')) {
						typesetUrl = printOrder.typesetImageUrl.split(',')[0];
					}else {
						typesetUrl = printOrder.typesetImageUrl;
					}
					let data = {
						id: printOrder.productId,
						background: printOrder.backgroup,
						dpi,
						height,
						heightPixel: heightPixel,
						maxSize: maxSize,
						minSize: minSize,
						name: printOrder.productName,
						photoUrl: itemData.showImage,
						printNum,
						specId,
						typesetUrl: encodeURIComponent(typesetUrl),
						width,
						widthPixel,
					}
					uni.navigateTo({
						url: `/pages/make-photo/make-photo-print?type=make-photo&data=${JSON.stringify(data)}`,
					})
				}
			}else {
				uni.showToast({
					icon: 'none',
					title: '订单有误，请联系客服',
				})
			}
		})
	}
	// 根据产品id查询产品详情
	async function byId(id) {
		return new Promise((next)=>{
			uni.$request('/api/busi/product/select/byId', {id}).then((res)=>{
				if(res.status == 200) {
					next(res.data.product);
				}else {
					uni.showToast({
						icon: 'error',
						title: '未查到详情'
					})
				}
			})
		})
	}
	
</script>

<style lang="less">
.data_list_view {
	position: relative;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	background-color: #f5f5f5;
	padding: 20rpx 0;
}
.list_item {
	margin-bottom: 20rpx;
	background-color: #ffffff;
}
.list_item:last-child {
	margin-bottom: 0;
}
.list_item_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx;
	border: 2rpx solid #f5f5f5;
	.list_item_info_img {
		width: 160rpx;
		height: 214rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.list_item_info_right {
		position: relative;
		width: calc(100% - 180rpx);
		height: 214rpx;
	}
	.list_item_info_rCon1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list_item_info_rCon1_t1 {
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 37rpx;
		color: rgba(56, 56, 56, 1);
	}
	.list_item_info_rCon1_t2 {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 41rpx;
		color: rgba(166, 166, 166, 1);
	}
	.list_item_info_rCon1_t2Style1 {
		color: rgba(69, 145, 230, 1);
	}
	.list_item_info_rCon1_t2Style2 {
		color: rgba(67, 207, 124, 1);
	}
	.list_item_info_rCon2 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 35rpx;
		color: rgba(166, 166, 166, 1);
	}
	.list_item_info_background {
		height: 20rpx;
		width: 20rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.list_item_info_bottom {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.list_item_info_bPrice {
		text-align: right;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 47rpx;
		color: rgba(56, 56, 56, 1);
	}
	.list_item_info_bTime {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 35rpx;
		color: rgba(166, 166, 166, 1);
	}
}
.list_item_btnBox {
	padding: 32rpx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	.list_item_btn {
		margin-right: 20rpx;
		padding: 12rpx 40rpx;
		border-radius: 200rpx;
		border: 2rpx solid rgba(229, 229, 229, 1);
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 35rpx;
		color: rgba(56, 56, 56, 1);
	}
	.list_item_btn:last-child {
		margin-right: 0;
	}
}
</style>
